<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>用户注册</title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">

  <!--1.引入 bootstrap 框架全局样式 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
  <!--2.引入 Layer 弹窗的样式 -->
  <link rel="stylesheet" href="layer/layer/theme/default/layer.css"/>
  <!--3.引入 jquery 框架类库 -->
  <script src="bootstrap/js/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
  <script src="js/sb-admin-2.min.js"></script>

  <!--4.引入 bootstrap 框架类库 -->
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <!--5.引入 Layer 弹窗的类库 -->
  <script src="layer/layer/layer.js"></script>
  <!--6.引入 angularJS 框架类库 -->
  <script src="angularjs/angular.min.js"></script>
  <!--7.引入 angularJS 框架分页的类库 -->
  <script src="angularjs/pagination.js"></script>
  <!--8.引入 Layer 弹窗的类库 -->
  <script src="layer/layer/layer.js"></script>
  <!--9.定义自己写的 javascript 代码： -->
  <script>
      //创建模块
      var app = angular.module("MyApp", []);
      //创建控制器
      app.controller("RegisterController", function ($scope, $http) {

          $http.get("/users/testConnection",function (data) {
              console.log(data);
          });

          $scope.user = {
              userpwd : "",
              userphone : ""
          };
          $scope.repeatpwd = "";
          //验证第一次密码
          $scope.checkPwd = function() {
              if (!(/^[0-9A-Za-z]{8,20}$/.test($scope.user.userpwd))) {
                  layer.tips("密码格式不正确!", "#exampleInputPassword", {tips: [3, "red"], time: 1500});
              }
          };
          //验证第二次密码
          $scope.checking = function() {
              if ($scope.repeatpwd == $scope.user.userpwd) {
              } else {
                  layer.tips("两次输入的密码不一致!", "#exampleRepeatPassword", {tips: [3, "red"], time: 1500});
                  $scope.repeatpwd = null;
              }
          };
          //验证手机号
          $scope.checking = function() {
              if ($scope.repeatpwd == $scope.user.userpwd) {
              } else {
                  layer.tips("两次输入的密码不一致!", "#exampleRepeatPassword", {tips: [3, "red"], time: 1500});
                  $scope.repeatpwd = null;
              }
          };

          //同意用户协议
          $scope.agree = function() {
              if ($("#clause").prop("checked")) {
                  $("#register").attr("disabled", false).css("pointer-events", "auto");
              } else {
                  $("#register").attr("disabled", true).css("pointer-events", "none");
              }
          };

          //注册
          $scope.submit = function () {
              if (!(/^[0-9A-Za-z]{8,20}$/.test($scope.user.userpwd))) {
                  layer.tips("密码格式不正确,无法提交!", "#exampleInputPassword", {tips: [3, "red"], time: 1500});
              } else {
                  if (!(/^1[0-9]{10}$/.test($scope.user.userphone))) {
                      layer.tips("手机号格式不正确,不能提交!", "#exampleInputPhone", {tips: [3, "red"], time: 1500});
                  } else {
                     console.log("开始注册");
                     $http.post("/users/user/register?smsCode="+$scope.smsCode,$scope.user ).success(function (data) {
                         if (data.code == -1) {
                             layer.msg(data.msg);
                         } else if (data.code == 0) {
                             layer.msg("注册成功", {icon: 6});
                             setTimeout(function () {location.href = "login.html";}, 800)
                         }
                     });
                  }
              }
          };

          //获取短信验证码
          $scope.getSmsCode =function () {
              if ($scope.user.userphone.length == 11) {
                  $http.get("/tool/sms?tel=" + $scope.user.userphone).then(function () {
                      layer.msg("默认验证码是：123456");
                      //layer.msg("注意查看手机,验证码有效期5分钟!");
                  });
              } else {
                  layer.msg("检查手机号是否正确!");
              }
          };
          //验证
      });

      app.controller('registerCtrl', function($scope, $interval){
          $scope.initTime = false;
          $scope.timeoutValue = 60000;
      });
      app.directive('timerButton', function($timeout, $interval){
          return {
              restrict: 'AE',
              scope: {
                  showTimer: '=',
                  timeout: '='
              },
              link: function(scope, element, attrs){
                  scope.timer = false;
                  scope.timerCount = scope.timeout / 1000;
                  scope.text = "获取验证码";
                  scope.onClick = function(){
                      scope.showTimer = true;
                      scope.timer = true;
                      scope.text = 's';
                      var counter = $interval(function(){
                          if(scope.timerCount > 0) {
                              scope.timerCount = scope.timerCount - 1;
                          }else {
                              scope.timerCount = '';
                          }
                      }, 1000);
                      $timeout(function(){
                          scope.text = "获取验证码";
                          scope.timer = false;
                          $interval.cancel(counter);
                          scope.showTimer = false;
                          scope.timerCount = scope.timeout / 1000;
                      }, scope.timeout);
                  }
              },
              template: '<button ng-click="onClick()" class="btn btn-primary btn-br20px" ng-disabled="timer"><span ng-show="showTimer">重新获取({{ timerCount }}</span>{{text}}<span ng-show="showTimer">)</span></button>'
          };
      });
  </script>
  <style>
    .container {
      padding-top: 50px;
    }
    form.user .form-control-user {
      padding: 0 15px;
      font-size: 14px;
    }
    form.user .btn-user {
      font-size: 14px;
    }
    .btn-br20px {
      border-radius: 20px;
    }
  </style>
</head>
<div class="modal fade" id="servicePaperModal" tabindex="-1" role="dialog" aria-labelledby="servicePaperModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" style="color: deepskyblue;font-weight: bold">服务协议</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
      </div>
      <div class="modal-body">
        关于本系统的最终解释权归此系统的开发者所有
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<body class="bg-gradient-primary" ng-app="MyApp" ng-controller="RegisterController">

  <div class="container">
    <div class="card o-hidden border-0 shadow-lg my-5">
      <div class="card-body p-0">
        <!-- Nested Row within Card Body -->
        <div class="row">
          <div class="col-lg-5 d-none d-lg-block "><img src="img/register.jpg" style="height: 500px;width: 100%;"></div>
          <div class="col-lg-7">
            <div class="p-5">
              <div class="text-center">
                <h1 class="h4 text-gray-900 mb-4">注册账号</h1>
              </div>
              <form class="user" name="userForm" ng-submit="submit()" >
                <div class="form-group">
                  <input type="text" oninput="this.value=this.value.replace(/\s+/g,'')"
                         class="form-control form-control-user" id="exampleFirstName"
                         ng-model="user.username" placeholder="真实姓名" required>
                </div>
                <div class="form-group row">
                  <div class="col-sm-6 mb-3 mb-sm-0">
                    <input ng-blur="checkPwd()" type="password" minlength="8" maxlength="20" oninput="this.value=this.value.replace(/\s+/g,'')" class="form-control form-control-user" id="exampleInputPassword" ng-model="user.userpwd"  placeholder="8-20位密码 (字母或数字)" required>
                  </div>
                  <div class="col-sm-6">
                    <input ng-blur="checking()" oninput="this.value=this.value.replace(/\s+/g,'')" type="password" class="form-control form-control-user" id="exampleRepeatPassword" ng-model="repeatpwd" placeholder="确认密码" required>
                  </div>
                </div>
                <div class="form-group">
                  <input type="text"  minlength="11" maxlength="11"   oninput="this.value=value.replace(/[^\d]/g,'')" class="form-control form-control-user" id="exampleInputPhone" ng-model="user.userphone"  placeholder="手机号码" required>
                </div>
                <div class="form-group row">
                  <div class="col-sm-8 mb-3 mb-sm-0">
                    <input type="text" class="form-control form-control-user" maxlength="6" id="exampleFirstCode" ng-model="smsCode" placeholder="输入验证码" required>
                  </div>
                  <div class="col-sm-4" ng-controller="registerCtrl" >
                      <timer-button class="btn-br20px" show-timer="initTime" ng-click="getSmsCode()" timeout="timeoutValue" id="eee">获取验证码</timer-button>
                  </div>
                </div>
                <div class="form-group">
                  <label for="clause"></label>
                  <input name="agree" type="checkbox"  id="clause" ng-click="agree()" ng-required="expression" />
                  <span>阅读并同意<a href="javascript:void(0);" id="acceptServicePaper" title="阅读并同意">服务协议</a></span>
                </div>
                <button type="submit" class="btn btn-primary btn-user btn-block" id="register" disabled="userForm.$invalid" >
                  确认注册
                </button>
              </form>
              <hr>
              <div>
                <a style="float: left" href="login.html">已有账号去登录</a><a style="float: right" href="forgot-password.html">忘记密码</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="text-right text-gray-600">金证证券在线交易中心</div>
      </div>
    </div>
  </div>

  <script>
      $(function () {
          $("#register").attr("disabled", true).css("pointer-events","none");
          $("#acceptServicePaper").click(function () {
              $("#servicePaperModal").modal("show");
          })
      });
  </script>

</body>

</html>
